<template>
  <!-- 升级操作 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">
      <el-row>
        <el-col :span="12">

          <el-form-item prop="member_name" label="姓名">
            <el-input v-model="dataForm.member_name" placeholder="姓名" clearable disabled minlength="1" maxlength="20" show-word-limit />
          </el-form-item>

          <el-form-item prop="mobile" label="手机号">
            <el-input v-model="dataForm.mobile" placeholder="手机号" disabled maxlength="11" clearable show-word-limit />
          </el-form-item>

          <el-form-item prop="openid" label="OPENID">
            <el-input v-model="dataForm.openid" placeholder="微信公众号OPENID" disabled clearable />
          </el-form-item>

        </el-col>
        <el-col :span="12">

          <el-form-item prop="card_no" label="卡号">
            <el-input v-model="dataForm.card_no" placeholder="卡号" disabled clearable />
          </el-form-item>

          <el-form-item prop="level_name" label="等级">
            <el-input :value="dataForm.level_name" placeholder="等级" disabled clearable />
          </el-form-item>

          <el-form-item prop="card_id" label="ID">
            <el-input v-model="dataForm.card_id" placeholder="会员ID" disabled clearable />
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item prop="upgradeType" label="操作">
        <el-radio-group v-model="dataForm.upgradeType">
          <el-radio :label="true">升级</el-radio>
          <el-radio :label="false">降级</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item prop="newCardType" label="新等级">
        <level v-model="dataForm.newCardType" @change="changeLevel" />
      </el-form-item>

      <el-form-item prop="remark" label="备注">
        <el-input v-model="dataForm.remark" placeholder="请输入备注以方便追溯历史原因(必填)" clearable maxlength="10" show-word-limit />
      </el-form-item>

    </el-form>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 升级操作
 */
import level from '@/components/member/level'
export default {
  name: 'Upgraded',
  components: {
    level
  },
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({})
      }
    }
  },
  data() {
    return {
      api: this.$u.api.Member,
      title: '升级操作',
      dataForm: {},
      rules: {
        upgradeType: [
          { required: true, message: '请选择模式', trigger: 'change' }
        ],
        newCardType: [
          { required: true, message: '请选择新的等级', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: ['blur'] }
        ]
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      // console.log(newVal + '---------------' + oldVal)
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        const d = {
          upgradeType: true,
          newCardType: '',
          new_level_name: '',
          remark: ''
        }
        this.dataForm = this.$u.deepMerge(d, this.data)
        const { member_name } = this.dataForm
        this.title = '升级操作:查询【' + member_name + '】'
        // 初始化数据
        this.dataForm.upgradeType = true
        this.dataForm.newCardType = ''
        this.dataForm.remark = ''

        // console.log(this.dataForm)
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    // 监听新等级选择
    changeLevel(level) {
      this.dataForm.new_level_name = level.name
    },
    // 确认
    confirm() {
      const self = this
      const { card_no, upgradeType, newCardType, new_level_name, remark, card_type } = self.dataForm

      // 提示信息
      const upgradeTitle = upgradeType ? '升级' : '降级'
      const tips = '您确定' + upgradeTitle + '为' + new_level_name + ',请谨慎操作'

      self.$refs['dataForm'].validate((valid) => {
        if (valid) {
          self.$confirm(tips, '提示', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
            const data = { card_no, upgradeType, newCardType, remark, card_type }
            self.api.upgrade(data).then(() => {
              // 通知信息
              self.$u.msg('操作成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            }).catch(() => {
            })
          }).catch(() => {
          })
        }
      })

      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
